<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
</head>

<body>

    <body style="padding:8px;">
        <form class="layui-form" action="" onsubmit="return false" lay-filter="countEdit">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="name" id="videoHall" lay-vertype="tips" placeholder="请输入放映厅" lay-verify="required" autocomplete="off"
                        class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" id="txttime" name="time" lay-vertype="tips" placeholder="请输入放映时间" lay-verify="required" autocomplete="off"
                        class="layui-input" lay-key="1">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="price" id="price" lay-vertype="tips" placeholder="请输入票价" lay-verify="required|number" autocomplete="off"
                        class="layui-input">
                </div>
                <div class="layui-input-inline" style="width:auto;">
                    <button class="layui-btn" id="btnSubmit" type="button" lay-submit="">添加场次</button>
                </div>
            </div>
        </form>
        <table id="demo" lay-filter="test"></table>
        <script src="../../layui/layui.js"></script>
        <script src="../../js/jquery-1.12.4.min.js"></script>
        <script src="../../js/lodash.min.js"></script>
        <script>
            const obj = query(location.href);
            $("#btnSubmit").click(function () {
                const name = $("#videoHall").val();//放映厅
                const price = $("#price").val();//票价
                const time = $("#txttime").val();//时间
                if(name!="" && price!="" && time !=""){
                    let data = {
                    name,
                    price,
                    time
                }
                console.log(data)
                //调用增加场次接口
                $.ajax({
                    url: "/api/MovieAndCinema/" + obj.mid,
                    method: "put",
                    data,
                    success: function () {
                        tableObj.reload();
                        $("#videoHall").val("");
                        $("#price").val("");
                        $("#txttime").val("");
                    }
                });

                }
               
            })
            let tableObj;
            layui.use(['table', 'layer'], function () {
                const layer = layui.table;

                tableObj = layer.render({
                    elem: '#demo',
                    url: '/api/MovieAndCinema/' + obj.cid,//数据接口，模拟的接口
                    parseData:function (res) {
                        for (let i = 0; i < res.data.length; i++) {
                            console.log(res);
                            if (obj.id == res.data[i].movie._id) {
                                const data = res.data[i].screens;
                                return {
                                    "code": 0, //解析接口状态
                                    "msg": "", //解析提示文本
                                    "count": data.length, //解析数据长度
                                    data, //解析数据列表
                                }
                            }
                        }
                    },
                    cols: [[
                        {
                            field: 'name',
                            title: '放映厅',

                        },
                        {
                            field: 'time',
                            title: "时间",
                        },
                        {
                            field: 'price',
                            title: '票价'

                        },

                        {
                            title: '操作',
                            templet: '<div class="layui-btn-container"><button class="layui-btn layui-btn-sm layui-btn-danger" onclick="delCount(`{{d._id}}`, this)">删除</div>',
                            width: "28%",
                        }
                    ]
                    ]
                });
            })

        /** 
         * 时间控件
         */
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#txttime', //指定元素
                type: "time",
                range: ":",
                range: false, //x显示日期的最大最小

            });
        });
        
        function delCount(id, btn) {
            layer.confirm('确定删除该场次吗？', function (index) {
                $.ajax({
                    url: "/api/MovieAndCinema/del",//该电影的id
                    method: "post",
                    data: {
                        movie:obj.mid,
                        del: id
                    }
                });
                $(btn).parents("tr").remove();
                layer.close(index);
            });
        }

            //传入Date对象给初始值
            function query(url) {
                const parts = url.split("?");
                if (parts.length == 1) {//地址中没有参数
                    return {};
                }
                const obj = {};
                parts[1].split("&").map(item => item.split("=")).forEach(([p, v]) => {
                    obj[p] = decodeURIComponent(v);
                });
                return obj;
            }
        </script>

    </body>
</body>

</html>